<template>
  <div :id="'topo_datacenter_' + index" class="topo-content-unit">
    <div class="datacenter-img">
      <a-badge
        :number-style="{ backgroundColor: '#52c41a' }"
        :showZero="true"
        :count="item.appCount"
      >
        <img
          src="@assets/securityServiceTopo/datacenter.svg"
          @click="$emit('gotoOverview', item.resourceId)"
        />
      </a-badge>
    </div>
    <div class="datacenter-title">
      <a-popover
        placement="rightBottom"
        :getPopupContainer="
          (triggerNode) => {
            return triggerNode.parentNode;
          }
        "
      >
        <template slot="title">
          <div class="radar-title">
            <span style="display: inline-block; margin-right: 15px">
              {{ item.resourceName }}
            </span>
            <span style="display: inline-block; margin-right: 15px">
              PUE：
              <v-count-to
                style="display: inline-block"
                :endVal="item.pue || 0"
              />
            </span>
            <span>
              配电子网负荷：
              <v-count-to
                style="display: inline-block"
                :endVal="item.load || 0"
                unit="KW"
              />
            </span>

            <div class="title-progress">
              <span>模型评分：</span>
              <a-progress
                style="width: 58%"
                status="active"
                :percent="Number.parseInt(item.totalScore)"
                :format="(percent) => `${percent}`"
                :stroke-color="
                  item.totalScore < 60
                    ? '#b93b04'
                    : item.totalScore < 80
                    ? '#ffb400'
                    : '#089b04'
                "
              />
            </div>
          </div>
        </template>

        <template slot="content">
          <template v-if="item && item.scores && item.factors">
            <Radar
              style="width: 700px"
              :ukey="item.resourceId"
              :chartId="'radar' + item.resourceId"
              title="配电子网负荷"
              :data="getRadarData(item)"
            />
          </template>
          <template v-else>
            <a-spin />
          </template>
        </template>
        <span>
          {{ item.resourceName }}
        </span>
      </a-popover>
    </div>
    <div id="meterWrapper">
      <a-form :labelCol="{ span: 13 }" :wrapperCol="{ span: 11 }">
        <!-- <a-form-item label="动环能耗">
                          <span class="ant-form-text">
                            {{ (item.power || 0) + " KWH" }}
                          </span>
                        </a-form-item> -->
        <a-form-item
          label="配电子网负荷"
          style="font-size: 18px; cursor: pointer"
        >
          <span class="ant-form-text" style="color: rgb(254, 138, 0)">
            <template v-if="item.resourceData && item.resourceData.length">
              <a-popover
                placement="rightTop"
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode;
                  }
                "
              >
                <template slot="content">
                  <StatisticsLine
                    :ref="'line-' + item.resourceId"
                    style="width: 400px"
                    :ukey="item.resourceId"
                    :meter="meter"
                    :sourceList="item.resourceData"
                  />
                </template>
                <b>
                  <v-count-to :endVal="item.load || 0" unit="KW" />
                </b>
              </a-popover>
            </template>
            <template v-else>
              <a-spin />
            </template>
          </span>
        </a-form-item>
        <!-- <a-form-item style="font-size: 18px" label="PUE">
          <span class="ant-form-text" style="color: #26b7cf">
            <b>
              <v-count-to :endVal="item.pue || 0" />
            </b>
          </span>
        </a-form-item> -->
        <a-form-item label="数据中心能耗">
          <span class="ant-form-text">
            <v-count-to :endVal="item.dpower || 0" unit="KWH" />
          </span>
        </a-form-item>
        <a-form-item label="数据中心温度">
          <span class="ant-form-text">
            <v-count-to :endVal="item.temperature || 0" unit="°C" />
          </span>
        </a-form-item>
        <a-form-item label="IT设备能耗">
          <span class="ant-form-text">
            <v-count-to :endVal="item.itPower || 0" unit="KWH" />
          </span>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import Radar from "./charts/Radar";
import StatisticsLine from "./charts/StatisticsLine";
import VCountTo from "./VCountTo";
export default {
  name: "DatacenterItem",
  props: {
    item: {
      type: Object,
      default: undefined,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  components: {
    Radar,
    StatisticsLine,
    VCountTo,
  },
  data() {
    return {
      meter: {
        id: 3,
        key: "datacenter.load",
        name: "数据中心配电子网负荷",
        unit: "KW",
      },
    };
  },
  mounted() {},
  watch: {},
  methods: {
    getRadarData(record) {
      if (record && record.scores && record.factors) {
        let list = [];
        record.scores.forEach((d, i) => {
          list.push({
            item: record.factors[i].layer + "：" + d.factorName + "评分",
            score: d.score,
            diff: record.factors[i].diff,
          });
        });
        return list;
      } else {
        return [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.datacenter-title {
  cursor: pointer;
  margin: 6px auto 10px;
  background-color: #009688;
  color: #ffffff;
  border: 1px solid #009688;
  border-radius: 10px;
  width: 270px;
  text-align: center;
}

div#meterWrapper > .ant-form {
  background-color: #ffffff;
  width: 270px;
  margin: 0 auto;
  box-shadow: 0px 2px 5px #888888;
}

/* div#meterWrapper > .ant-form-text {
  text-align: left;
} */

/deep/ .ant-form-item-control {
  text-align: left;
}

.ant-form-item {
  margin-bottom: 0;
}

.topo-content-unit {
  width: 330px;
  display: inline-block;
}

.datacenter-img {
  text-align: center;

  img {
    cursor: pointer;
    width: 80px;
  }
}
</style>